<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Import style -->
<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />
<!-- Import Vue 3 -->
<script src="https://unpkg.com/vue@3"></script>
<!-- Import component library -->
<script src="https://unpkg.com/element-plus"></script>
<style>
#app {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
flex-wrap: wrap;
margin-top: 200px;
}

.card {
min-width: 200px;
height: 280px;
margin: 10px;

.card-header {
span {
vertical-align: middle;
}

.name {
height: 50px;
line-height: 50px;
margin-left: 10px;
}
}
}
</style>
</head>

<body>
<div id="app">
<el-card class="card" v-for="stu in stus">
<template #header>
<div class="card-header">
<span><el-avatar :size=" 50" :src="stu.avatar" /></span>
<span class="name">{{stu.name}}</span>
</div>
</template>
<div>
<p>年龄：{{stu.age}}</p >
<p>性别：{{stu.sex}}</p >
<p>总分：{{stu.score[0]+stu.score[1]+stu.score[2]}}</p >
</div>
<el-tooltip placement="bottom" v-if="stu.score[0]>=60&&stu.score[1]>=60&&stu.score[2]>=60">
<template #content>
<p>语文：{{stu.score[0]}}</p >
<p>数学：{{stu.score[1]}}</p >
<p>英语：{{stu.score[2]}}</p >
</template>
<el-button>查看成绩单</el-button>
</el-tooltip>
</el-card>
</div>
</body>
<script>
const App = {
data() {
return {
stus: [
{ id: "", name: "张三", age: 20, sex: "男", score: [88, 100, 93], total: 0, avatar: "./img/1.jpg" },
{ id: "", name: "李四", age: 20, sex: "男", score: [90, 95, 58], total: 0, avatar: "./img/2.jpg" },
{ id: "", name: "王五", age: 20, sex: "男", score: [85, 88, 86], total: 0, avatar: "./img/3.jpg" },
],
report: {},
drawer: false
}
},
methods: {}
}
Vue.createApp(App).use(ElementPlus).mount("#app")
</script>

</html>